.root{
    /***************************************************************************
     *                                                                         *
     * The main color palette from which the rest of the colors are derived.   *
     *                                                                         *
     *  These 4 items should be all you need to alter other than specific      *
     *  results.                                                               *
     **************************************************************************/    
    -fx-base: rgba(0,0,0,0.001);
    
    -fx-background: rgba(0,0,0,0.08);
    -fx-control-inner-background: rgba(0,0,0,0.05);
    
    -fx-accent: #ffffffbe;
    -fx-hover-base: ladder(transparent,transparent 20%, transparent 35%, derive(-fx-accent,40%) 48%);
    -fx-focus-color: #ffffff66;
    -fx-faint-focus-color: #ffffff33;
    
    

    /*################   FXYZ   ##############################*/
    /*-fxyz3d-color-palette1: "../samples/res/palette_1530.png";*/
    -fxyz-lighting-track: linear-gradient(to right, #ffffff 5%, #ff0000 6%, #ffff00 40%, #00ff00 60%, #00ffff 80%, #0000ff 100%);
    -fx-default-button: linear-gradient(to bottom, #ffffff13 5%, transparent 100%);
    
    
    /*########################################################*/


    /* One of these colors will be chosen based upon a ladder calculation
     * that uses the brightness of a background color.  Instead of using these
     * colors directly as -fx-text-fill values, the sections in this file should
     * use a derived color to match the background in use.  See also:
     *
     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
     * -fx-text-background-color for text on top of -fx-background
     * -fx-text-inner-color for text on top of -fx-control-inner-color
     * -fx-selection-bar-text for text on top of -fx-selection-bar
     */
    -fx-dark-text-color: black;
    -fx-mid-text-color: dimgray;
    -fx-light-text-color: white;

    /* The color that is used in styling controls. The default value is based
     * on -fx-base, but is changed by pseudoclasses to change the base color.
     * For example, the "hover" pseudoclass will typically set -fx-color to
     * -fx-hover-base (see below) and the "armed" pseudoclass will typically
     * set -fx-color to -fx-pressed-base.
     */
    -fx-color: -fx-background;

    /* The opacity level to use for the "disabled" pseudoclass.
     */
    -fx-disabled-opacity: 0.4;

    /***************************************************************************
     *                                                                         *
     * Colors that are derived from the main color palette.                    *
     *                                                                         *
     **************************************************************************/


    /* A little darker than -fx-base and used as the -fx-color for the
     * "armed" pseudoclass state.
     *
     * TODO: should this be renamed to -fx-armed-base?
     */
    -fx-pressed-base: derive(-fx-base,-20%);

    /* Used to specify the body color for focused objects.  By default, it's
     * the same as -fx-base (i.e., the body color doesn't change when a control
     * gets focus).
     */
    -fx-focused-base: transparent;

    /* The color to use for -fx-text-fill when text is to be painted on top of
     * a background filled with the -fx-background color.
     */
    -fx-text-background-color: ladder(
        -fx-text-base-color,
        -fx-light-text-color 45%,
        -fx-mid-text-color  46%,
        -fx-dark-text-color   60%
        );

    /* The default color for all text.  Sections should change the -fx-text-fill
     * property if change the background color to something else.  See also:
     *
     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
     * -fx-text-background-color for text on top of -fx-background
     * -fx-text-inner-color for text on top of -fx-control-inner-color
     * -fx-selection-bar-text for text on top of -fx-selection-bar
     */
    -fx-text-fill: white;

    /* A little darker than -fx-color and used to draw boxes around objects such
     * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
     */
    -fx-box-border: ladder(
        -fx-color,
        rgba(0,0,0,0.6) 20%,
        derive(-fx-color,-30%) 30%
        );

    /* Darker than -fx-background and used to draw boxes around text boxes and
     * password boxes.
     */
    -fx-text-box-border: ladder(
        -fx-background,
        rgba(0,0,0,0.6) 10%,
        derive(-fx-background, -15%) 30%
        );

    /* Typically lighter than -fx-background and used to provide a small
     * highlight under controls and tick marks for checkboxes and radio buttons.
     * Often used with an insets of 0 0 -1 0, and is also often the first
     * color in a -fx-background-color list.  Also is typically replaced by
     * -fx-focus-color with an insets of -1.4 in the "focused" pseudoclass.
     */
    -fx-shadow-highlight-color: ladder(
        -fx-background,
        transparent 0%,
        derive(-fx-background,40%)   5%,
        derive(-fx-background,60%)  70%,
        derive(-fx-background,100%) 85%,
        derive(-fx-background,100%) 97%,
        derive(-fx-background,-10%) 97.5%
        );

    /* A gradient that goes from a little darker than -fx-color on the top to
     * even more darker than -fx-color on the bottom.  Typically is the second
     * color in the -fx-background-color list as the small thin border around
     * a control. It is typically the same size as the control (i.e., insets
     * are 0).
     */
    -fx-outer-border: linear-gradient(
        to bottom,
        derive(-fx-color,-9%) 0%, 
        -fx-accent 98%,
        derive(-fx-color,-33%) 100%
        );

    /* A gradient that goes from a bit lighter than -fx-color on the top to
     * a little darker at the bottom.  Typically is the third color in the
     * -fx-background-color list as a thin highlight inside the outer border.
     * Insets are typically 1.
     */
    -fx-inner-border: linear-gradient(
        to bottom,
        ladder(-fx-color, 
        derive(-fx-color,80%) 60%, 
        -fx-color 82%) 0%,                /* following 3 this line prev val:white;*/
        ladder(-fx-color, 
        derive(-fx-color,20%) 10%, 
        derive(-fx-color,-10%) 80%) 100%
        );

    -fx-inner-border-horizontal: linear-gradient(
        to right,
        ladder(-fx-color, 
        derive(-fx-color,80%) 60%, 
        -fx-color 82%) 0%,
        ladder(-fx-color, 
        derive(-fx-color,20%) 10%, 
        derive(-fx-color,-10%) 80%) 100%
        );

    -fx-inner-border-bottomup: linear-gradient(
        to top,
        ladder(-fx-color, 
        derive(-fx-color,80%) 60%, 
        -fx-color 82%) 0%,
        ladder(-fx-color, 
        derive(-fx-color,20%) 10%, 
        derive(-fx-color,-10%) 80%) 100%);

    /* A gradient that goes from a little lighter than -fx-color at the top to
     * a little darker than -fx-color at the bottom and is used to fill the
     * body of many controls such as buttons.  Typically is the fourth color
     * in the -fx-background-color list and represents main body of the control.
     * Insets are typically 2.
     */
    -fx-body-color: linear-gradient(
        to bottom,
        derive(-fx-base,34%) 0%,
        derive(-fx-base,-18%) 100%
        );

    -fx-body-color-bottomup:  linear-gradient(
        to top,
        derive(-fx-accent,34%) 0%,
        derive(-fx-base,-18%) 100%
        );

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
     */
    -fx-text-base-color: ladder(
        black,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
        );

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-control-inner-background.
     */
    -fx-text-inner-color: ladder(
        -fx-control-inner-background,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
        );

    /* The color to use for small mark-like objects such as checks on check
     * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
     */
    -fx-mark-color: ladder(
        rgba(0,255,255,0.9),
        derive(rgba(0,255,255,0.9),80%) 30%,
        derive(-fx-accent,-63%) 31%
        );

    /* The small thin light "shadow" for mark-like objects. Typically used in
     * conjunction with -fx-mark-color with an insets of 1 0 -1 0.
     */
    -fx-mark-highlight-color: ladder(
        rgba(0,255,255,0.9),
        derive(rgba(0,255,255,0.9),40%) 60%,
        derive(rgba(0,255,255,0.9),80%) 85%
        );

    /* Background for items in list like things such as menus, lists, trees,
     * and tables.
     *
     * TODO: it seems like this should be based upon -fx-accent and we should
     * remove the setting -fx-background in all the sections that use
     * -fx-selection-bar.
     */

    -fx-selection-bar-non-focused: -fx-faint-focus-color;
    -fxyz-selection-bar-non-focused:
        linear-gradient(
        to right,
        transparent 0%,
        -fx-faint-focus-color 50%,
        transparent 100%
        );

    -fx-selection-bar: -fx-faint-focus-color;
    -fxyz-selection-bar:
        linear-gradient(
        to right,
        transparent 0%,
        -fx-faint-focus-color 50%,
        transparent 100%
        );

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-selection-bar.
     *
     * TODO: it seems like this should be derived from -fx-selection-bar.
     */
    -fx-selection-bar-text: ladder(
        white,
        white 50%,
        white 51%
        );

    /* The default border color for a tab.
     *
     * TODO: should this be -fx-box-border or derived from some other color?
     */
    -fx-tab-border-color: -fx-box-border;

    /* These are needed for Popup */
    -fx-background-color: transparent;
    -fx-background-radius: inherit;
    -fx-background-insets: inherit;
    -fx-padding: inherit;

    /* The color to use in ListView/TreeView/TableView to indicate hover. */
    -fx-cell-hover-color: -fxyz-selection-bar;

    -fx-cell-focus-inner-border: -fxyz-selection-bar-non-focused;

    /* The colors to use in Pagination */
    -fx-page-bullet-border: -fx-box-border;
    -fx-page-indicator-hover-border: -fx-box-border;

}
